<template>
  <div>
    <div class="top">
      <div>
        省：
        <el-cascader
          size="large"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
        >
        </el-cascader>
      </div>
      <div style="margin-top: 10px" class="top2">
        <span style="float: left; width: 30px" class="demonstration">年:</span>
        <el-date-picker
          style="float: left; width: 200px"
          v-model="year"
          type="year"
          placeholder="选择年"
        >
        </el-date-picker>
        <span style="float: left; width: 30px" class="demonstration">月:</span>
        <el-select
          style="float: left; width: 200px"
          v-model="month"
          placeholder="选择月"
        >
          <el-option v-for="item in monthList" :key="item" :value="item">
          </el-option>
        </el-select>
      </div>
      <div>
        销量排序：
        <el-radio v-model="radio" :disabled="isUse" label="1">全部</el-radio>
        <el-radio v-model="radio" label="2">降序</el-radio>
        <el-radio v-model="radio" label="3">升序</el-radio>
        <el-button @click="getInfo2" size="small">查询</el-button>
        <el-button @click="reset" size="small">重置</el-button>
      </div>
    </div>
    <div class="bottom">
      <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%">
        <el-table-column prop="province" label="省"> </el-table-column>
        <el-table-column prop="city" label="市"> </el-table-column>
        <el-table-column prop="area" label="区"> </el-table-column>
        <el-table-column prop="active_value" label="总活跃度">
        </el-table-column>
      </el-table>
       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
import axios from "axios";

export default {
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      isUse:false,
       currentPage: 1, //初始页
      pagesize: 5, //    每页的数据
      monthList: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      year: null,
      month: null,
      radio: "1",
      tableData: [
        {
          active_value: 0,
          area: "",
          city: "",
          province: "",
        },
      ],
      tableData2: [
        {
          active_value: 0,
          area: "",
          city: "",
          province: "",
        },
      ],
    };
  },

  methods: {
    handleChange() {
      console.log(this.options);
      for (let i = 0; i < this.selectedOptions.length; i++) {
        CodeToText[this.selectedOptions[i]];
      }
      console.log(this.selectedOptions);
    },
    getInfo() {
      axios.get("http://47.108.201.43:3000/api/getAreaactivity").then((res) => {
        console.log(res);
        this.tableData = res.data.resoult;
        this.tableData2 = res.data.resoult;//用于排序后取消排序
      });
    },
    getInfo2() {
      if (
        this.month == null ||
        this.year == null ||
        this.selectedOptions == []
      ) {
        this.$message({
          message: "缺少查询信息",
          type: "error",
        });
        return;
      } else {
        var province = CodeToText[this.selectedOptions[2]];
        console.log(province);
        var year = this.year.getFullYear();
        console.log(year);
        var month = 0;
        console.log(this.monthList.length);
        for (let i = 0; i < this.monthList.length; i++) {
          if (this.monthList[i] == this.month) {
            month = i + 1;
          }
        }
        console.log(month);
        axios
          .post("http://47.108.201.43:3000/api/queryAreaactivity", {
            province: province,
            year: year,
            month: month,
          })
          .then((res) => {
            console.log(res);
            this.tableData = res.data.resoult;
            this.tableData2 = res.data.resoult;
          });
      }
    },
    reset() {
      this.selectedOptions = [], 
      this.year = null, 
      this.month = null;
      this.getInfo();
      this.radio="1";
      this.isUse=false;
    },
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
     compare2(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    },
     handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    }
  },
  created() {
    this.getInfo();
  },
  watch: {
    radio() {
        if(this.radio=="2"){
          this.tableData.sort(this.compare2("active_value"))
          this.isUse=true;
        }else if(this.radio=="3"){
          this.tableData.sort(this.compare("active_value"))
          this.isUse=true;
        }else{
          this.tableData=this.tableData2
        }
    },
  },
};
</script>
<style scoped>
.top {
  margin-top: 15px;
  margin-left: 15px;
}
.top2 {
  line-height: 100px; /*设置line-height与父级元素的height相等*/
  text-align: center; /*设置文本水平居中*/
  overflow: hidden; /*防止内容超出容器或者产生自动换行*/
}
.bottom {
  margin: 10px;
}
</style>